<template>
  <div class="student-course-audit-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-check-square"></i> 选课审核
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div class="query-form">
        <el-row :gutter="20">
          <el-col :span="3">
            <el-input
              @keyup.enter.native="query"
              placeholder="学生姓名"
              v-model="queryForm.studentName"
            />
          </el-col>
          <el-col :span="3">
            <el-input
              @keyup.enter.native="query"
              placeholder="课程名称"
              v-model="queryForm.courseName"
            />
          </el-col>
          <el-col :span="3">
            <el-select v-model="queryForm.status" placeholder="审核状态" clearable>
              <el-option label="待审核" :value="0" />
              <el-option label="已通过" :value="1" />
              <el-option label="已拒绝" :value="2" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button @click="query" icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <div class="table">
        <el-table :data="tableData" stripe v-loading="loading">
          <el-table-column label="选课ID" prop="id" width="80" />
          <el-table-column label="学生姓名" prop="studentName" />
          <el-table-column label="课程名称" prop="courseName" />
          <el-table-column label="申请时间" width="160">
            <template slot-scope="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button 
                size="mini" 
                type="info" 
                @click="handleViewDetail(scope.row)"
              >查看详情</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="mini" 
                type="success" 
                @click="handleAudit(scope.row.id, true)"
              >通过</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="mini" 
                type="danger" 
                @click="handleAudit(scope.row.id, false)"
              >拒绝</el-button>
              <span v-else>已审核</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row justify="center" type="flex">
        <el-pagination
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          :total="total"
          @current-change="getPage"
          background
          layout="prev, pager, next"
        >
        </el-pagination>
      </el-row>
    </div>

    <el-dialog
      title="审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="auditForm">
        <el-form-item label="审核结果">
          <el-radio-group v-model="auditForm.approved">
            <el-radio :label="true">通过</el-radio>
            <el-radio :label="false">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注" v-if="!auditForm.approved">
          <el-input v-model="auditForm.remark" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitAudit">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="选课详情"
      :visible.sync="detailDialogVisible"
      width="30%"
      :before-close="handleCloseDetail"
    >
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="选课ID">{{ currentDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="学生姓名">{{ currentDetail.studentName }}</el-descriptions-item>
          <el-descriptions-item label="课程名称">{{ currentDetail.courseName }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ formatDate(currentDetail.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">
            <el-tag :type="getStatusType(currentDetail.status)">
              {{ getStatusText(currentDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核时间" v-if="currentDetail.status !== 0">
            {{ formatDate(currentDetail.auditTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="审核备注" v-if="currentDetail.status === 2">
            {{ currentDetail.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "../../api/teacher/studentCourse";

export default {
  name: "TeacherStudentCourseAudit",
  data() {
    return {
      queryForm: {
        studentName: "",
        courseName: "",
        status: null
      },
      tableData: [],
      loading: false,
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      auditForm: {
        id: null,
        approved: false,
        remark: ''
      },
      dialogVisible: false,
      detailDialogVisible: false,
      currentDetail: null
    };
  },
  methods: {
    query() {
      this.pageIndex = 1;
      this.getPage(1);
    },
    getPage(pageIndex) {
      this.loading = true;
      api.getPage(
        pageIndex,
        this.queryForm.studentName,
        this.queryForm.courseName,
        this.queryForm.status
      ).then(res => {
        this.tableData = res;
        this.total = res.length;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleViewDetail(row) {
      this.currentDetail = row;
      this.detailDialogVisible = true;
    },
    handleAudit(id, approved) {
      this.auditForm.id = id;
      this.auditForm.approved = approved;
      this.dialogVisible = true;
    },
    submitAudit() {
      if (!this.auditForm.remark && !this.auditForm.approved) {
        this.$message.warning('请填写拒绝原因');
        return;
      }
      
      const action = this.auditForm.approved ? "通过" : "拒绝";
      api.audit(this.auditForm.id, this.auditForm.approved).then(() => {
        this.$message.success(`${action}成功`);
        this.dialogVisible = false;
        this.auditForm.remark = '';
        this.getPage(this.pageIndex);
      }).catch(err => {
        this.$message.error(`${action}失败：${err.message || '未知错误'}`);
      });
    },
    getStatusType(status) {
      switch (status) {
        case 0:
          return "warning";
        case 1:
          return "success";
        case 2:
          return "danger";
        default:
          return "info";
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return "待审核";
        case 1:
          return "已通过";
        case 2:
          return "已拒绝";
        default:
          return "未知";
      }
    },
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleString();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloseDetail() {
      this.detailDialogVisible = false;
    }
  },
  created() {
    this.getPage(1);
  }
};
</script>

<style scoped>
.student-course-audit-wrap {
  padding: 20px;
}

.container {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}

.query-form {
  margin-bottom: 20px;
}

.table {
  margin-bottom: 20px;
}
</style> 